<template>
  <div class="social-media-chart-container" ref="chartContainer">
    <div class="social-media-info" ref="socialMediaInfo">
      <div class="platform-details">
        <div class="platform-title">Social media platform</div>
        <div class="platform-review-count">120,878</div>
        <div class="platform-review-label">Total engagements</div>
      </div>
    </div>
    <div class="chart-container">
      <PieChart
        :option="optionAnnular1"
        :height="chartHeight"
        :width="chartWidth"
      ></PieChart>
    </div>
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";
export default {
  components: {
    PieChart,
  },
  data() {
    return {
      mediaSwitch: true,
      chartWidth: "100%", // 初始宽度
      chartHeight: "1.3417rem", // 保持固定高度或动态计算
      optionAnnular1: {
        tooltip: {
          trigger: "item",
        },
        // 关键修正：legend.data 的 name 必须与 series.data 的 name 完全一致
        // 关键修正：legend.data 的 name 必须与 series.data 的 name 完全一致
        legend: [
          {
            orient: "vertical",

            left: "20%", // 使用百分比定位
            top: "30%",
            formatter: (name) => {
              const item = this.optionAnnular1.series[0].data.find(
                (dataItem) => dataItem.name === name
              );
              // 使用 {valueStyle|数值} 包裹数值，并添加单位
              return `${name} {valueStyle|${item.value.toLocaleString()} k}`;
            },
            textStyle: {
              // 普通文本样式（名称）
              color: "#454545",
              fontSize: 14,
              lineHeight: 22, // 行高与图标高度一致（itemHeight: 22）
              rich: {
                valueStyle: {
                  fontWeight: "bold", // 数值加粗
                  // 若需单独设置数值颜色，可添加 color: "#232323"
                },
              },
              padding: [0, 0, 0, 4], // 左侧内边距增加 4px，使文字右移
            },
            itemWidth: 22,
            itemHeight: 22,
            itemGap: 20,

            data: [
              {
                name: "YouTube",
                icon: "image://" + require("@/assets/pieIcon/YouTube1.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "Threads",
                icon: "image://" + require("@/assets/pieIcon/Threads.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "LinkedIn",
                icon: "image://" + require("@/assets/pieIcon/LinkedIn1.png"),
                textStyle: { color: "#454545" },
              },
            ],
          },
          {
            orient: "vertical",

            left: "40%", // 使用百分比定位
            top: "30%",
            formatter: (name) => {
              const item = this.optionAnnular1.series[0].data.find(
                (dataItem) => dataItem.name === name
              );
              // 使用 {valueStyle|数值} 包裹数值，并添加单位
              return `${name} {valueStyle|${item.value.toLocaleString()} k}`;
            },
            textStyle: {
              // 普通文本样式（名称）
              padding: [0, 0, 0, 4], // 左侧内边距增加 4px，使文字右移
              color: "#454545",
              lineHeight: 22, // 行高与图标高度一致（itemHeight: 22）
              fontSize: 14,
              rich: {
                valueStyle: {
                  fontWeight: "bold", // 数值加粗
                  // 若需单独设置数值颜色，可添加 color: "#232323"
                },
              },
            },
            itemWidth: 22,
            itemHeight: 22,
            itemGap: 20,
            data: [
              {
                name: "Reddit",
                icon: "image://" + require("@/assets/pieIcon/Reddit1.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "Google",
                icon: "image://" + require("@/assets/pieIcon/Google3.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "X",
                icon: "image://" + require("@/assets/pieIcon/X1.png"),
                textStyle: { color: "#454545" },
              },
            ],
          },
          {
            orient: "vertical",

            left: "60%", // 使用百分比定位
              top: "30%",
            formatter: (name) => {
              const item = this.optionAnnular1.series[0].data.find(
                (dataItem) => dataItem.name === name
              );
              // 使用 {valueStyle|数值} 包裹数值，并添加单位
              return `${name} {valueStyle|${item.value.toLocaleString()} k}`;
            },
            textStyle: {
              // 普通文本样式（名称）
              padding: [0, 0, 0, 4], // 左侧内边距增加 4px，使文字右移
              lineHeight: 22, // 行高与图标高度一致（itemHeight: 22）
              color: "#454545",
              fontSize: 14,
              rich: {
                valueStyle: {
                  fontWeight: "bold", // 数值加粗
                  // 若需单独设置数值颜色，可添加 color: "#232323"
                },
              },
            },
            itemWidth: 22,
            itemHeight: 22,
            itemGap: 20,
            data: [
              {
                name: "Instagram",
                icon: "image://" + require("@/assets/pieIcon/Instagram1.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "TikTok",
                icon: "image://" + require("@/assets/pieIcon/TikTok1.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "RedNote",
                icon: "image://" + require("@/assets/pieIcon/RedNote1.png"),
                textStyle: { color: "#454545" },
              },
            ],
          },
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            center: ["89%", "50%"],
            radius: ["30%", "100%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "inside",
              formatter: function (params) {
                const percent = params.percent;
                const name = params.name;
                // 直接使用名称作为图标标识符
                return `{icon_${name}|}\n{percentStyle|${percent}%}`;
              },
              distance: 0, // 调整标签与饼图边缘的距离
              padding: [0, 0, 0, 0], // 调整标签内边距
              rich: {
                percentStyle: {
                  fontSize: 3,
                  color: "#fff",
                  width: 20,
                  height: 20,
                  align: "center",
                  verticalAlign: "middle",
                },
                // 为每个平台定义图标，确保路径正确
                icon_YouTube: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/YouTube2.png"), // 确保文件存在
                  },
                  width: 14,
                  height: 14,
                  align: "center",
                },
                icon_Reddit: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/Reddit.png"),
                  },
                  width: 14,
                  height: 14,
                  align: "center",
                },
                icon_TikTok: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/TikTok.png"), // 确保文件存在
                  },
                  width: 14,
                  height: 14,
                  align: "center",
                },
                icon_Instagram: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/Instagram.png"), // 确保文件存在
                  },
                  width: 14,
                  height: 14,
                  align: "center",
                },
                icon_X: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/X.png"), // 确保文件存在
                  },
                  width: 14,
                  height: 14,
                  align: "center",
                },

                icon_RedNote: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/RedNote.png"), // 确保文件存在
                  },
                  width: 14,
                  height: 14,
                  align: "center",
                },
                icon_Google: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/Google.png"), // 确保文件存在
                  },
                  width: 14,
                  height: 14,
                  align: "center",
                },
                icon_Threads: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/Threads1.png"), // 确保文件存在
                  },
                  width: 14,
                  height: 14,
                  align: "center",
                },
                icon_LinkedIn: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/LinkedIn.png"), // 确保文件存在
                  },
                  width: 14,
                  height: 14,
                  align: "center",
                },

                // 其他平台图标类似配置...
                percentStyle: {
                  padding: [0, 0],
                  width: 14,
                  height: 14,
                  align: "center",
                  verticalAlign: "middle",
                  fontSize: 10,
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "#fff",
            },
            emphasis: {
              scale: false,
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              // 确保每个数据项都有对应的图例
              { value: 200, name: "YouTube", itemStyle: { color: "#6D03A1" } },
              { value: 200, name: "Reddit", itemStyle: { color: "#8001BE" } },
              { value: 200, name: "TikTok", itemStyle: { color: "#A601F1" } },
              {
                value: 200,
                name: "Instagram",
                itemStyle: { color: "#A563EA" },
              },
              { value: 200, name: "X", itemStyle: { color: "#BD8DF0" } },
              { value: 200, name: "LinkedIn", itemStyle: { color: "#D7B1F0" } },
              { value: 100, name: "Threads", itemStyle: { color: "#DDD6F1" } },
              { value: 200, name: "Google", itemStyle: { color: "#E8E0FF" } },
              { value: 200, name: "RedNote", itemStyle: { color: "#420062" } },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.calculateChartSize(); // 初始化尺寸
    window.addEventListener("resize", this.calculateChartSize); // 监听窗口缩放
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.calculateChartSize); // 移除监听
  },
  methods: {
    calculateChartSize() {
      if (!this.$refs.chartContainer) return;

      // 获取图表容器的实际可用宽度（已考虑父容器padding）
      const containerWidth = this.$refs.chartContainer.offsetWidth;

      // 直接使用容器宽度（减去必要的边距）
      this.chartWidth = `${containerWidth - 24}px`; // 24px为预留边距

      // 调试输出
      console.log("Calculated chart width:", this.chartWidth);
    },
  },
};
</script>

<style lang="scss" scoped>
.social-media-chart-container {
  padding: 0 24px 0 24px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  // margin-top: 32px;
  //   height: 1.2569rem;
  border-radius: 8px;
  border: 1px solid #cdcccc;
  background: #fff;

  .social-media-info {
    width: 1.875rem;
    height: 1.7708rem;

    .platform-details {
      margin-top: 30px;
      margin-bottom: 18px;

      .platform-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 22px;
        color: #454545;
      }

      .platform-review-count {
        font-size: 24px;
        font-weight: 700;
        color: #232323;
        margin-bottom: 4px;
      }

      .platform-review-label {
        font-size: 10px;
        font-weight: 400;
        color: #454545;
      }
    }

    .platform-switch {
      display: flex;
      justify-content: space-between;

      .switch-label {
        font-size: 14px;
        font-weight: 600;
        color: #6a6969;
        // margin-right: 124px;
        // width: 0.5833rem;
      }

      // 新增的样式，用于调整 el-switch 的文字位置
      .el-switch {
        display: flex;
        align-items: center;
        justify-content: center;
        .el-switch__core {
          // 确保开关按钮内的文字也能正确居中
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .chart-container {
    position: absolute;
    right: 0;
    top: 10%;
    // margin: 37px 24px;
  }
}
</style>
